<template>
	<view>
		<image class="top-bg" src="../static/水墨背景4.png" mode="scaleToFill"></image>
		<view class="musicList">
			<uni-section class="mb-10" title="玄门音乐" type="line">
				<template v-slot:right> </template>
			</uni-section>
			<uni-list>
				<uni-list-item clickable v-for="item in zaowanke" class="play-list" :title="item.name" note=""
					@click="play({ playList: zaowanke, name: item.name })"></uni-list-item>
			</uni-list>
		</view>
		<view class="play-control" :style="{ bottom: windowBottom }">
			<image class="leftImg" src="../static/玄鸟.svg" mode="scaleToFill"></image>
			<div class="title">玄门早晚课</div>
			<div class="my-icon iconfont  icon-bofang bofang" @click="pause()"
				:disabled="audio && audio.status == 'pause'">
			</div>
			<div class="my-icon iconfont icon-zanting " v-if="audio && audio.status == 'pause'" @click="countiuePlay()">
			</div>
			<div class="my-icon iconfont  icon-dingshi dingshi" @click="popTimer()"></div>
		</view>
		<view class="play-name" v-if="name">正在播放:{{ name }}</view>
	</view>
</template>

<script>
	import {
		Audio,
		copyObject
	} from '../utils/index'
	class AudioControl {}
	export default {
		data() {
			return {
				audio: null,
				name: '',
				windowBottom: '70px',
				zaowanke: [{
						name: '玄门早坛功课经（半坛）',
						src: '/static/音乐/早坛.ogg',
						playList: 'zaowanke'
					},
					{
						name: '玄门晚坛功课经（半坛）',
						src: '/static/音乐/晚坛.ogg',
						playList: 'zaowanke'
					},
					{
						src: '/static/音乐/祝香咒.mp3',
						name: '祝香咒',
						playList: 'zaowanke'
					},
					{
						src: '/static/音乐/三宝香.mp3',
						name: '三宝香',
						playList: 'zaowanke'
					}
				]
			}
		},
		created() {
			this.windowBottom = `${uni.getWindowInfo().windowBottom}px`
		},
		props: {},
		methods: {
			play(o) {
				if (!this.audio) {
					this.audio = new Audio(o.playList)
				}
				this.audio.setPlayList(copyObject(o.playList))
				this.audio.playByName(o.name)
				this.audio.setplayType('单曲循环')
				this.name = o.name
			},
			pause() {
				this.audio.pause()
			},
			countiuePlay() {
				this.audio.countiue()
			},
			popTimer() {},
			setPlayTime(time) {
				setTimeout(() => {
					this.audio.pause()
				}, time)
			}
		}
	}
</script>

<style lang="less" scoped>
	.top-bg {
		width: 100%;
		height: 150px;
	}

	.play-control {
		position: fixed;
		width: 100%;
		// bottom: 50px;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		// background: gray;
		height: 60px;
		box-sizing: border-box;
		padding: 5px 20px 5px 20px;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	}

	.leftImg {
		width: 40px;
		height: 40px;
	}

	.title {
		flex-grow: 1;
		text-align: center;
	}

	.play-name {
		text-align: center;
		line-height: 1.5;
	}

	.my-icon {
		font-size: 24px;
		color: gray;
		margin-left: .5rem;
	}

	.dingshi {
		font-size: 30px;
	}

	.bofang {
		font-size: 28px;
	}
</style>
